<template>
  <el-dialog v-model="dialogVisible" title="入职记录" width="80%" :close-on-click-modal="false">
    <!-- 基础信息 -->
    <el-card class="mb-4" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="font-bold">基础信息</span>
        </div>
      </template>
      <el-descriptions :column="4" border>
        <el-descriptions-item label="用户">{{ personInfo?.userId_dictText }}</el-descriptions-item>
        <el-descriptions-item label="部门">{{ personInfo?.deptId_dictText }}</el-descriptions-item>
        <el-descriptions-item label="上级"
          >{{ personInfo?.superiorId_dictText }}
        </el-descriptions-item>
        <el-descriptions-item label="店铺">{{ personInfo?.shopId_dictText }}</el-descriptions-item>
        <el-descriptions-item label="入职日期"
          >{{ formatDate(personInfo?.entryTime, 'YYYY-MM-DD') }}
        </el-descriptions-item>
        <el-descriptions-item label="学历">{{ personInfo?.education }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ personInfo?.age }}</el-descriptions-item>
        <el-descriptions-item label="专业">{{ personInfo?.major }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 新增按钮 -->
    <div class="mb-4">
      <el-button type="primary" @click="openForm('create')" v-hasPermi="['hr:train-personal-details:create']">
        <Icon icon="ep:plus" class="mr-1" />
        新增入职记录
      </el-button>
    </div>

    <!-- 卡片列表 -->
    <div v-loading="loading">
      <el-empty v-if="!list || list.length === 0" description="暂无入职记录" />
      <div v-else class="entry-log-list">
        <el-card v-for="item in list" :key="item.id" class="log-card" shadow="never">
          <div class="card-header-custom">
            <div class="header-left">
              <template v-if="editingId !== item.id">
                <div class="day-badge">
                  <Icon icon="ep:calendar" class="mr-1" />
                  第{{ item.day }}天
                </div>
                <el-divider direction="vertical" />
                <span class="date-text">
                  <Icon icon="ep:clock" class="mr-1" />
                  {{ formatDate(item.date, 'YYYY-MM-DD') }}
                </span>
              </template>
              <template v-else>
                <div class="day-edit">
                  <Icon icon="ep:calendar" class="mr-1" />
                  <el-input-number
                    v-model="editForm.day"
                    :min="1"
                    size="small"
                    :controls="false"
                    class="day-input"
                    placeholder="天数"
                  />
                </div>
                <el-divider direction="vertical" />
                <div class="date-edit">
                  <Icon icon="ep:clock" class="mr-1" />
                  <el-date-picker
                    v-model="editForm.date"
                    type="date"
                    value-format="x"
                    placeholder="请选择日期"
                    size="small"
                    class="date-picker"
                  />
                </div>
              </template>
            </div>
            <div class="header-right">
              <el-button
                v-if="editingId !== item.id"
                link
                type="primary"
                size="small"
                @click="startEdit(item)"
              >
                <Icon icon="ep:edit" />
                编辑
              </el-button>
              <template v-else>
                <el-button
                  link
                  type="success"
                  size="small"
                  @click="saveEdit(item)"
                  :loading="saveLoading"
                >
                  <Icon icon="ep:check" />
                  保存
                </el-button>
                <el-button link type="info" size="small" @click="cancelEdit">
                  <Icon icon="ep:close" />
                  取消
                </el-button>
              </template>
              <!--              <el-button-->
              <!--                v-if="editingId !== item.id"-->
              <!--                link-->
              <!--                type="danger"-->
              <!--                size="small"-->
              <!--                @click="handleDelete(item.id)"-->
              <!--                v-hasPermi="['hr:train-personal-details:delete']"-->
              <!--              >-->
              <!--                <Icon icon="ep:delete"/>-->
              <!--                删除-->
              <!--              </el-button>-->
            </div>
          </div>
          <div class="card-content">
            <div class="content-item">
              <div class="item-label">
                <Icon icon="ep:reading" class="label-icon" />
                培训标准
              </div>
              <div class="item-value">
                <div v-if="item.day == 1">
                  ①企业介绍：公司制度，薪酬，晋升通道<br />
                  ②行业认知:了解百货行业，货盘，erp等<br />
                  ③链接上新培训:1.链接组成 2.主图，标题，sku价格，商品属性，详情页，编码，视频
                </div>
                <div v-if="item.day == 2"
                  >①上新链接实操:1.链接实操数量 2.第一天链接实操链接的检查和评估
                  3.上新链接中存在的问题
                </div>
                <div v-if="item.day == 3">①上新链接实操:1.培训主图标准，主图的构成</div>
                <div v-if="item.day == 4">①上新链接实操:2.定价/利润核定/sku，优惠券等</div>
                <div v-if="item.day == 5">①上新链接实操:1.视频的要求，视频的渠道，找视频的思路</div>
                <div v-if="item.day == 6"
                  >①上链接的实操:1.这里主要讲选品，如何通过货盘选品上架，思路和方法
                  2.补单，补单的流程
                </div>
                <div v-if="item.day == 7"
                  >①综合评估:1.评估第一天到第七天的链接质量，上新效率
                  2.七天培训下来，还存在哪些问题，需要优化哪些方面
                  3.性格评测，抗压性评测，稳定性评估，基础运营知识评测，有考试
                </div>
                <div v-if="item.day == 15"
                  >①工作进展跟进:1.工作对比进度，维度从，同批人员，同比上一周，工作做一个总结
                  2.还存在哪些问题，需要加强
                </div>
                <div v-if="item.day == 30"
                  >①工作总结:1.汇总一月下来，工作结果 2.人员在工作状态，数据结果上如何，做判断
                </div>
              </div>
            </div>
            <div class="content-item">
              <div class="item-label">
                <Icon icon="ep:document" class="label-icon" />
                入职记录
              </div>
              <div class="item-value" v-if="editingId !== item.id">{{ item.record || '-' }}</div>
              <el-input
                v-else
                v-model="editForm.record"
                type="textarea"
                :rows="4"
                placeholder="请输入入职记录"
              />
            </div>

            <div class="content-item">
              <div class="item-label">
                <Icon icon="ep:edit-pen" class="label-icon" />
                总结
              </div>
              <div class="item-value" v-if="editingId !== item.id">{{ item.summarize || '-' }}</div>
              <el-input
                v-else
                v-model="editForm.summarize"
                type="textarea"
                :rows="4"
                placeholder="请输入总结"
              />
            </div>
            <div class="content-item">
              <div class="item-label">
                <Icon icon="ep:checked" class="label-icon" />
                综合判断
              </div>
              <div class="item-value" v-if="editingId !== item.id">{{ item.judge || '-' }}</div>
              <el-input
                v-else
                v-model="editForm.judge"
                type="textarea"
                :rows="4"
                placeholder="请输入综合判断"
              />
            </div>
            <!--            <div class="content-item full-width" v-if="item.remark || editingId === item.id">-->
            <!--              <div class="item-label">-->
            <!--                <Icon icon="ep:chat-line-square" class="label-icon"/>-->
            <!--                备注-->
            <!--              </div>-->
            <!--              <div class="item-value remark-text" v-if="editingId !== item.id">{{ item.remark }}</div>-->
            <!--              <el-input-->
            <!--                v-else-->
            <!--                v-model="editForm.remark"-->
            <!--                type="textarea"-->
            <!--                :rows="3"-->
            <!--                placeholder="请输入备注"-->
            <!--              />-->
            <!--            </div>-->
          </div>
        </el-card>
      </div>
    </div>

    <!-- 表单弹窗：添加/修改 -->
    <TrainEntryLogForm ref="formRef" @success="getList" />
  </el-dialog>
</template>
<script setup lang="ts">
import {
  TrainEntryLog,
  TrainPersonalDetails,
  TrainPersonalDetailsApi
} from '@/api/business/hr/train/personalDetails'
import TrainEntryLogForm from './TrainEntryLogForm.vue'
import { formatDate } from '@/utils/formatTime'
import dayjs from 'dayjs'

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗显示状态
const personInfo = ref<TrainPersonalDetails>() // 个人基础信息
const parentId = ref<number>() // 父id
const loading = ref(false) // 列表的加载中
const list = ref<TrainEntryLog[]>([]) // 列表的数据
const editingId = ref<number>() // 当前编辑的记录ID
const saveLoading = ref(false) // 保存加载状态

interface EditFormState {
  day: number | null
  date: string | null
  record: string
  summarize: string
  judge: string
  remark: string
}

const editForm = ref<EditFormState>({
  day: null,
  date: null,
  record: '',
  summarize: '',
  judge: '',
  remark: ''
})

/** 打开弹窗 */
const open = (row: TrainPersonalDetails) => {
  dialogVisible.value = true
  personInfo.value = row
  parentId.value = row.id
  getList()
}

defineExpose({ open }) // 暴露open方法供父组件调用

/** 查询列表 */
const getList = async () => {
  if (!parentId.value) return
  loading.value = true
  try {
    const data = await TrainPersonalDetailsApi.getTrainEntryLogList({ parentId: parentId.value })
    list.value = data || []
  } finally {
    loading.value = false
  }
}

/** 开始编辑 */
const startEdit = (item: TrainEntryLog) => {
  editingId.value = item.id

  editForm.value = {
    day: item.day || '',
    date: item.date,
    record: item.record || '',
    summarize: item.summarize || '',
    judge: item.judge || '',
    remark: item.remark || ''
  }
}

/** 取消编辑 */
const cancelEdit = () => {
  editingId.value = undefined
  editForm.value = {
    day: '',
    date: '',
    record: '',
    summarize: '',
    judge: '',
    remark: ''
  }
}

/** 保存编辑 */
const saveEdit = async (item: TrainEntryLog) => {
  saveLoading.value = true
  try {
    const data = {
      ...item,
      day: editForm.value.day,
      date: editForm.value.date,
      record: editForm.value.record,
      summarize: editForm.value.summarize,
      judge: editForm.value.judge,
      remark: editForm.value.remark
    }
    await TrainPersonalDetailsApi.updateTrainEntryLog(data)
    message.success('保存成功')
    cancelEdit()
    await getList()
  } catch (error) {
    console.error('保存失败', error)
  } finally {
    saveLoading.value = false
  }
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  if (!parentId.value) {
    message.error('请选择一个人力培训-个人资料')
    return
  }
  formRef.value.open(type, id, parentId.value)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await TrainPersonalDetailsApi.deleteTrainEntryLog(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
</script>

<style scoped lang="scss">
.entry-log-list {
  .log-card {
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    margin-bottom: 16px;
    transition: all 0.2s;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      border-color: #c0c4cc;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    :deep(.el-card__body) {
      padding: 0;
    }
  }
}

.card-header-custom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(to right, #f8f9fa, #ffffff);
  border-bottom: 1px solid #e4e7ed;

  .header-left {
    display: flex;
    align-items: center;
    gap: 12px;

    .day-badge {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      background-color: #409eff;
      color: #ffffff;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 500;
    }

    .edit-field {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      color: #606266;

      :deep(.el-input-number) {
        .el-input__inner {
          text-align: center;
        }
      }
    }

    .el-divider--vertical {
      margin: 0;
      height: 16px;
    }

    .date-text {
      display: inline-flex;
      align-items: center;
      font-size: 13px;
      color: #606266;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 4px;
  }
}

.card-content {
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;

  .content-item {
    display: flex;
    flex-direction: column;
    gap: 8px;

    &.full-width {
      grid-column: 1 / -1;
    }

    .item-label {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: #909399;
      font-weight: 500;

      .label-icon {
        margin-right: 6px;
        font-size: 14px;
        color: #a8abb2;
      }
    }

    .item-value {
      font-size: 14px;
      color: #303133;
      line-height: 1.6;
      word-break: break-word;
      padding-left: 20px;

      &.remark-text {
        background-color: #f5f7fa;
        padding: 12px;
        border-radius: 4px;
        border-left: 3px solid #409eff;
      }
    }

    :deep(.el-textarea__inner) {
      font-size: 14px;
      line-height: 1.6;
    }
  }
}

// 编辑状态的卡片高亮
.entry-log-list .log-card:has(.header-right .el-button--success) {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.15);
}

// 响应式布局
@media (max-width: 768px) {
  .card-content {
    grid-template-columns: 1fr;
  }
}
</style>
